<template>
  <div id="category">
    <el-card>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="console.log('select menu')">
        <el-menu-item index="1">手机</el-menu-item>
        <el-menu-item index="2">电脑</el-menu-item>
        <el-menu-item index="3">服装</el-menu-item>
        <el-menu-item index="4">家具</el-menu-item>
        <el-menu-item index="5">生鲜</el-menu-item>
        <el-menu-item index="6">母婴</el-menu-item>
        <el-menu-item index="7">艺术</el-menu-item>
        <el-menu-item index="8">学习</el-menu-item>
        <el-menu-item index="9">美妆</el-menu-item>
        <el-menu-item index="10">医疗</el-menu-item>
        <el-menu-item index="11">交通</el-menu-item>
        <el-menu-item index="12">理财</el-menu-item>
      </el-menu>
      <el-row>
        <el-col :span="11">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">全部分类</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/category' }">手机</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
        <el-col :span="1"><div class="none"></div> </el-col>
        <el-col :span="12">
          <span>已选择标签: </span>
          <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)">
            {{tag}}
          </el-tag>
        </el-col>
      </el-row>
      <div>
        <el-row v-for="(category,catIndex) in categoryList" :key="catIndex">
          <el-col :span="2" class="tagCategory"><span>{{category.name}}:</span></el-col>
          <el-col :span="22">
            <el-col class="tag" :span="3" v-for="(tag,tagIndex) in category.tagList" :key="tagIndex"><span @click="addTag(catIndex,tagIndex)">{{tag}}</span></el-col>
          </el-col>
        </el-row>
      </div>

    </el-card>
    <phone></phone>
    <router-view/>
  </div>
</template>

<script>
import Phone from "@/pages/phone";
export default {
  name: "category",
  components: {Phone},
  data() {
    return {
      activeIndex: '',
      inputVisible: false,
      inputValue: '',
      categoryList: [],
      dynamicTags:[],
    }
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    addTag(catIndex,tagIndex){
      this.categoryList[catIndex].checked=this.categoryList[catIndex].tagList[tagIndex]
      let dynamicTags=[]
      //注意this.$router和$route 是不一样的，router是整体的vue-router对象
      //$route是当前的路由对象（就是表示index下面const routes的每一个元素）
      let keyword=this.$route.query.keyword
      if(keyword) dynamicTags.push(keyword)
      this.categoryList.forEach((item)=>{
        console.log(this.categoryList.checked)
        let tag=item.checked
        if(tag){
          dynamicTags.push(tag)
        }

      })
      this.dynamicTags=dynamicTags
    },

  },
  computed:{

  },
  mounted() {
    this.axios.get(
        '/api/categoryList'
    ).then((res)=>{
      let data=res.data.data
      this.categoryList=data
    }).catch((err)=>{
      this.$message.error(err)
    })
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.tag{
  font-size: 0.7em;
  padding: 5px;
}
.tagCategory{
  background-color: #F2F6FC;
  padding: 5px 5px 30px 5px;
  font-size: 0.8em;
  font-weight: bold;
}
</style>
